<h3 *ngIf="title">{{title}}</h3>
<div class="j4care_dynamic_table" [ngClass]="config?.cssTableClass" *ngIf="patients && patients.length > 0" (mouseleave)="active_td = ''">
    <!--Headers 1:-->
        <div class="th {{hover_mode}}" [ngClass]="config?.cssThClass" [ngStyle]="{top:config.headerTop || '186px'}">
            <div class="td"
                 *ngFor="let table of tableSchema[hover_mode]"
                 [ngClass]="[config?.cssTdClass || '',(table.type != 'value' && table.type != 'pipe')?'empty_td':'not_empty_td', (table.elementId && active_td === table.elementId) ? 'active':'', table.type || '']"
                 [ngStyle]="{width: table.calculatedWidth}"
            >
                <ng-container *ngIf="table.type === 'value' || table.type === 'pipe'">{{table.header}}</ng-container>
                <ng-container *ngIf="!(table.type === 'value' || table.type === 'pipe')">&nbsp;</ng-container>
            </div>
        </div>
    <!--1:END;-->

    <!--Patient Table 1:-->
    <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let patient of patients|searchDicom:searchList;let i = index">
        <div class="patient_block table_item" (mouseenter)="hover_mode = 'patient'" [ngClass]="{'selected':patient.selected}" (click)="onBlockClick(patient)">
            <div class="td"
                 *ngFor="let patient_table of tableSchema.patient"
                 [ngClass]="[config?.cssTdClass || '', patient_table.cssClass || '', patient_table.type || '']"
                 [ngStyle]="{width: patient_table.calculatedWidth}"
                 [ngSwitch]="patient_table.type"
                 (mouseenter)="active_td = patient_table.elementId"
                 tooltip="{{
                    patient_table.type === 'value' ?
                        (patient_table.hook?
                            patient_table.hook(_.get(patient.attrs,patient_table.pathToValue)):
                            _.get(patient.attrs,patient_table.pathToValue)
                        ):
                        (patient_table.type === 'pipe' ?
                            (patient.attrs | dynamicPipe:patient_table.pipe):
                            ''
                        )
                }}"
            >
                <ng-container *ngSwitchCase="'dummy'"></ng-container>
                <ng-container *ngSwitchCase="'index'">{{patient.offset + 1}}</ng-container>
                <ng-container *ngSwitchCase="'actions'">
<!--                    <button class="pointer dicom_table_buttons" *ngIf="config.showCheckboxes" title="Select" (click)="patient.selected = !patient.selected">
                        <span *ngIf="!patient.selected" class="glyphicon glyphicon-unchecked"></span>
                        <span *ngIf="patient.selected" class="glyphicon glyphicon-check"></span>
                    </button>-->
                    <ng-container *ngFor="let action of patient_table.actions">
                      <a class="pointer dicom_table_buttons" *ngIf="(!action.showIf || action.showIf(patient, config))" (click)="$event.preventDefault();action.click(patient,'patient')" title="{{action.title || ''}}">
                          <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
                          <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
                      </a>
                    </ng-container>
                </ng-container>
                <ng-container *ngSwitchCase="'actions-menu'">
                    <a mat-button [matMenuTriggerFor]="menu" class="pointer dicom_table_buttons" ><span class="glyphicon glyphicon-option-vertical"></span></a>
                    <mat-menu #menu="matMenu" class="study_action_buttons patient">
<!--                        <button class="pointer dicom_table_buttons" *ngIf="!config.showCheckboxes" title="Select" (click)="patient.selected = !patient.selected">
                            <span *ngIf="!patient.selected" class="glyphicon glyphicon-unchecked"></span>
                            <span *ngIf="patient.selected" class="glyphicon glyphicon-check"></span>
                        </button>-->
                        <ng-container *ngFor="let action of patient_table.menu.actions">
                            <a *ngIf="(!action.showIf || action.showIf(patient, config))" class="pointer dicom_table_buttons" (click)="$event.preventDefault();action.click(patient,'patient')" title="{{action.title || ''}}">
                                <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</span>
                                <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</i>
                            </a>
                        </ng-container>
                    </mat-menu>
                </ng-container>
                <ng-container *ngSwitchCase="'pipe'">{{patient.attrs | dynamicPipe:patient_table.pipe}}</ng-container>
                <ng-container *ngSwitchCase="'value'">
                    <ng-container *ngIf="!patient_table.hook">
                        {{_.get(patient.attrs,patient_table.pathToValue) || '&nbsp;'}}
                    </ng-container>
                    <ng-container *ngIf="patient_table.hook">
                        {{patient_table.hook(_.get(patient.attrs,patient_table.pathToValue) || '&nbsp;')}}
                    </ng-container>
                </ng-container>
            </div>
            <attribute-list *ngIf="patient.showAttributes" [attrs]="patient.attrs"></attribute-list>
        </div>

        <!--Studies 2:-->
        <div *ngIf="patient.showStudies" class="study_main_block">
            <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let study of patient.studies;let i = index">
                <div class="study_block table_item" (mouseenter)="hover_mode = 'studies'" [ngClass]="{'selected':study.selected}">
                    <div class="td"
                         *ngFor="let studies_table of tableSchema.studies"
                         [ngClass]="[config?.cssTdClass || '', studies_table.cssClass || '', studies_table.type || '']"
                         [ngStyle]="{width: studies_table.calculatedWidth}"
                         [ngSwitch]="studies_table.type"
                         (mouseenter)="active_td = studies_table.elementId"
                         tooltip="{{
                            studies_table.type === 'value' ?
                                (studies_table.hook?
                                    studies_table.hook(_.get(study.attrs,studies_table.pathToValue)):
                                    _.get(study.attrs,studies_table.pathToValue)
                                ):
                                (studies_table.type === 'pipe' ?
                                    (study.attrs | dynamicPipe:studies_table.pipe):
                                    ''
                                )
                        }}"
                    >
                        <ng-container *ngSwitchCase="'index'">{{study.offset + 1}}</ng-container>
                        <ng-container *ngSwitchCase="'actions'">
<!--                            <button class="pointer dicom_table_buttons" *ngIf="config.showCheckboxes" title="Select" (click)="study.selected = !study.selected">
                                <span *ngIf="!study.selected" class="glyphicon glyphicon-unchecked"></span>
                                <span *ngIf="study.selected" class="glyphicon glyphicon-check"></span>
                            </button>-->
                            <ng-container *ngFor="let action of studies_table.actions">
                                <a *ngIf="(!action.showIf || action.showIf(study, config))" class="pointer dicom_table_buttons"  (click)="$event.preventDefault();action.click(study,'study')" title="{{action.title || ''}}">
                                    <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
                                    <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
                                </a>
                            </ng-container>
                        </ng-container>
                        <ng-container *ngSwitchCase="'actions-menu'">
<!--                            <button (click)="showStudyMenu = !showStudyMenu"><span class="glyphicon glyphicon-option-vertical"></span></button>
                            <div class="study_action_buttons" *ngIf="showStudyMenu">
                                <ng-container *ngFor="let action of studies_table.menu.actions">
                                    <a *ngIf="(!action.showIf || action.showIf(study, config))" class="pointer dicom_table_buttons" (click)="$event.preventDefault();action.click(study)" title="{{action.title || ''}}">
                                        <span *ngIf="action.icon.tag === 'span' " class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</span>
                                        <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</i>
                                    </a>
                                </ng-container>
                            </div>-->
                            <a mat-button [matMenuTriggerFor]="menu" class="pointer dicom_table_buttons" ><span class="glyphicon glyphicon-option-vertical"></span></a>
                            <mat-menu #menu="matMenu" class="study_action_buttons study" (click)="$event.stopPropagation()">
<!--                                <button class="pointer dicom_table_buttons" *ngIf="!config.showCheckboxes" title="Select" (click)="study.selected = !study.selected">
                                    <span *ngIf="!study.selected" class="glyphicon glyphicon-unchecked"></span>
                                    <span *ngIf="study.selected" class="glyphicon glyphicon-check"></span>
                                </button-->
                                <ng-container *ngFor="let action of studies_table.menu.actions">
                                    <a *ngIf="(!action.showIf || action.showIf(study, config))" class="pointer dicom_table_buttons" (click)="$event.preventDefault();action.click(study,'study')" title="{{action.title || ''}}">
                                        <span *ngIf="action.icon.tag === 'span' " class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</span>
                                        <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</i>
                                    </a>
                                </ng-container>
                            </mat-menu>
                        </ng-container>
                        <ng-container *ngSwitchCase="'pipe'">{{study.attrs | dynamicPipe:studies_table.pipe}}</ng-container>
                        <ng-container *ngSwitchCase="'value'">
                            <ng-container *ngIf="!studies_table.hook">
                                {{_.get(study.attrs, studies_table.pathToValue) || '&nbsp;'}}
                            </ng-container>
                            <ng-container *ngIf="studies_table.hook">
                                {{studies_table.hook(_.get(study.attrs, studies_table.pathToValue) || '&nbsp;')}}
                            </ng-container>
                        </ng-container>
                    </div>
                    <attribute-list *ngIf="study.showAttributes" [attrs]="study.attrs"></attribute-list>
                </div>
                <!--Series 3:-->
                <div *ngIf="study.showSeries" class="series_main_block">
                    <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let serie of study.series;let i = index">
                        <div class="series_block table_item" (mouseenter)="hover_mode = 'series'" [ngClass]="{'selected':serie.selected}">
                            <div class="td"
                                 *ngFor="let serie_table of tableSchema.series"
                                 [ngClass]="[config?.cssTdClass || '', serie_table.cssClass || '', serie_table.type || '']"
                                 [ngStyle]="{width: serie_table.calculatedWidth}"
                                 [ngSwitch]="serie_table.type"
                                 (mouseenter)="active_td = serie_table.elementId"
                                 tooltip="{{
                                    serie_table.type === 'value' ?
                                        (serie_table.hook?
                                            serie_table.hook(_.get(serie.attrs,serie_table.pathToValue)):
                                            _.get(serie.attrs,serie_table.pathToValue)
                                        ):
                                        (serie_table.type === 'pipe' ?
                                            (serie.attrs | dynamicPipe:serie_table.pipe):
                                            ''
                                        )
                                }}"
                            >
                                <ng-container *ngSwitchCase="'index'">{{serie.offset + 1}}</ng-container>
                                <ng-container *ngSwitchCase="'actions'">
<!--                                    <button class="pointer dicom_table_buttons" *ngIf="config.showCheckboxes" title="Select" (click)="serie.selected = !serie.selected">
                                        <span *ngIf="!serie.selected" class="glyphicon glyphicon-unchecked"></span>
                                        <span *ngIf="serie.selected" class="glyphicon glyphicon-check"></span>
                                    </button>-->
                                    <ng-container *ngFor="let action of serie_table.actions">
                                        <a *ngIf="(!action.showIf || action.showIf(serie, config))" class="pointer dicom_table_buttons"  (click)="$event.preventDefault();action.click(serie,'series')" title="{{action.title || ''}}">
                                            <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
                                            <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
                                        </a>
                                    </ng-container>
                                </ng-container>
                                <ng-container *ngSwitchCase="'actions-menu'">
                                    <a mat-button [matMenuTriggerFor]="menu" class="pointer dicom_table_buttons" ><span class="glyphicon glyphicon-option-vertical"></span></a>
                                    <mat-menu #menu="matMenu" class="study_action_buttons series">
<!--                                        <button class="pointer dicom_table_buttons" *ngIf="!config.showCheckboxes" title="Select" (click)="serie.selected = !serie.selected">
                                            <span *ngIf="!serie.selected" class="glyphicon glyphicon-unchecked"></span>
                                            <span *ngIf="serie.selected" class="glyphicon glyphicon-check"></span>
                                        </button>-->
                                        <ng-container *ngFor="let action of serie_table.menu.actions">
                                            <a *ngIf="(!action.showIf || action.showIf(serie, config))" class="pointer dicom_table_buttons" (click)="$event.preventDefault();action.click(serie,'series')" title="{{action.title || ''}}">
                                                <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</span>
                                                <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</i>
                                            </a>
                                        </ng-container>
                                    </mat-menu>
                                </ng-container>
                                <ng-container *ngSwitchCase="'pipe'">{{serie.attrs | dynamicPipe:serie_table.pipe}}</ng-container>
                                <ng-container *ngSwitchCase="'value'">
                                    <ng-container *ngIf="!serie_table.hook">
                                        {{_.get(serie.attrs, serie_table.pathToValue) || '&nbsp;'}}
                                    </ng-container>
                                    <ng-container *ngIf="serie_table.hook">
                                        {{serie_table.hook(_.get(serie.attrs, serie_table.pathToValue) || '&nbsp;')}}
                                    </ng-container>
                                </ng-container>
                            </div>
                            <attribute-list *ngIf="serie.showAttributes" [attrs]="serie.attrs"></attribute-list>
                        </div>

                        <!--Instance 4:-->
                        <div *ngIf="serie.showInstances" class="instance_main_block">
                            <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let instance of serie.instances;let i = index">
                                <div class="instance_block table_item" (mouseenter)="hover_mode = 'instance'" [ngClass]="{'selected':instance.selected}">
                                    <div class="td"
                                         *ngFor="let instance_table of tableSchema.instance"
                                         [ngClass]="[config?.cssTdClass || '', instance_table.cssClass || '', instance_table.type || '']"
                                         [ngStyle]="{width: instance_table.calculatedWidth}"
                                         [ngSwitch]="instance_table.type"
                                         (mouseenter)="active_td = instance_table.elementId"
                                         tooltip="{{
                                            instance_table.type === 'value' ?
                                                (instance_table.hook?
                                                    instance_table.hook(_.get(instance.attrs,instance_table.pathToValue)):
                                                    _.get(instance.attrs,instance_table.pathToValue)
                                                ):
                                                (instance_table.type === 'pipe' ?
                                                    (instance.attrs | dynamicPipe:instance_table.pipe):
                                                    ''
                                                )
                                        }}"
                                    >
                                        <ng-container *ngSwitchCase="'index'">{{instance.offset + 1}}</ng-container>
<!--                                        <ng-container *ngSwitchCase="'selected-checkbox'">
                                            <a class="pointer dicom_table_buttons" *ngIf="config.showCheckboxes" title="Select" (click)="instance.selected = !instance.selected">
                                                <span *ngIf="!instance.selected" class="glyphicon glyphicon-unchecked"></span>
                                                <span *ngIf="instance.selected" class="glyphicon glyphicon-check"></span>
                                            </a>
                                        </ng-container>-->
                                        <ng-container *ngSwitchCase="'actions'">
                                            <ng-container *ngFor="let action of instance_table.actions">
                                                <a *ngIf="(!action.showIf || action.showIf(instance, config))" class="pointer dicom_table_buttons"  (click)="$event.preventDefault();action.click(instance,'instance')" title="{{action.title || ''}}">
                                                    <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
                                                    <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
                                                </a>
                                            </ng-container>
                                        </ng-container>
                                        <ng-container *ngSwitchCase="'actions-menu'">
                                            <a mat-button [matMenuTriggerFor]="menu" class="pointer dicom_table_buttons" ><span class="glyphicon glyphicon-option-vertical"></span></a>
                                            <mat-menu #menu="matMenu" class="study_action_buttons instance">
<!--                                                <button class="pointer dicom_table_buttons" *ngIf="!config.showCheckboxes" title="Select" (click)="instance.selected = !instance.selected">
                                                    <span *ngIf="!instance.selected" class="glyphicon glyphicon-unchecked"></span>
                                                    <span *ngIf="instance.selected" class="glyphicon glyphicon-check"></span>
                                                </button>-->
                                                <ng-container *ngFor="let action of instance_table.menu.actions">
                                                    <a *ngIf="(!action.showIf || action.showIf(instance, config))" class="pointer dicom_table_buttons" (click)="$event.preventDefault();action.click(instance,'instance')" title="{{action.title || ''}}">
                                                        <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</span>
                                                        <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</i>
                                                    </a>
                                                </ng-container>
                                            </mat-menu>
                                        </ng-container>
                                        <ng-container *ngSwitchCase="'pipe'">{{instance.attrs | dynamicPipe:instance_table.pipe}}</ng-container>
                                        <ng-container *ngSwitchCase="'value'">
                                            <ng-container *ngIf="!instance_table.hook">
                                                {{_.get(instance.attrs,instance_table.pathToValue) || '&nbsp;'}}
                                            </ng-container>
                                            <ng-container *ngIf="instance_table.hook">
                                                {{instance_table.hook(_.get(instance.attrs,instance_table.pathToValue) || '&nbsp;')}}
                                            </ng-container>
                                        </ng-container>
                                    </div>
                                    <attribute-list *ngIf="instance.showAttributes" [attrs]="instance.attrs"></attribute-list>
                                    <attribute-list
                                            *ngIf="instance.showFileAttributes"
                                            [studyWebService]="studyWebService"
                                            [studyuid]="instance.wadoQueryParams.studyUID"
                                            [seriesuid]="instance.wadoQueryParams.seriesUID"
                                            [objectuid]="instance.wadoQueryParams.objectUID">
                                    </attribute-list>
                                </div>
                            </div>
                            <div class="tr" *ngIf="serie.instances && serie.instances.length > 0 && serie.instances[0].showPaginations">
                                <div class="instance_block table_item">
                                    <div class="td td_with_centered_child">
                                        <div class="centered_child">
                                            <button
                                                    title="Preview page of instances"
                                                    class="transparent_button"
                                                    (click)="paginationClick(serie, 'instance', 'prev')"
                                                    [disabled]="serie.instances[0].offset === 0"
                                            ><span class="glyphicon glyphicon glyphicon-chevron-left"></span></button>
                                            <button
                                                    title="Next page of instances"
                                                    class="transparent_button"
                                                    (click)="paginationClick(serie, 'instance', 'next')"
                                                    [disabled]="!serie.instances[0].hasMore"
                                            ><span class="glyphicon glyphicon glyphicon-chevron-right"></span></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--4:END;-->
                    </div>
                    <div class="tr" *ngIf="study.series && study.series.length > 0 && study.series[0].showPaginations">
                        <div class="series_block table_item">
                            <div class="td td_with_centered_child">
                                <div class="centered_child">
                                    <button
                                            title="Preview page of series"
                                            class="transparent_button"
                                            (click)="paginationClick(study, 'series', 'prev')"
                                            [disabled]="study.series[0].offset === 0"
                                    ><span class="glyphicon glyphicon glyphicon-chevron-left"></span></button>
                                    <button
                                            title="Next page of series"
                                            class="transparent_button"
                                            (click)="paginationClick(study, 'series', 'next')"
                                            [disabled]="!study.series[0].hasMore"
                                    ><span class="glyphicon glyphicon glyphicon-chevron-right"></span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--3:END;-->
            </div>
            <div class="tr" *ngIf="patient.studies && patient.studies.length > 0 && patient.studies[0].showPaginations">
                <div class="instance_block table_item">
                    <div class="td td_with_centered_child">
                        <div class="centered_child">
                            <button
                                    title="Preview page of studies"
                                    class="transparent_button"
                                    (click)="paginationClick(patient, 'study', 'prev')"
                            ><span class="glyphicon glyphicon glyphicon-chevron-left"></span></button>
                            <button
                                    title="Next page of studies"
                                    class="transparent_button"
                                    (click)="paginationClick(patient, 'study', 'next')"
                            ><span class="glyphicon glyphicon glyphicon-chevron-right"></span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--2:END;-->
        <!--mwl 2:-->
        <div *ngIf="patient.showMwls" class="study_main_block">
            <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let mwl of patient.mwls;let i = index">
                <div class="mwl_block table_item" (mouseenter)="hover_mode = 'mwl'" [ngClass]="{'selected':mwl.selected}">
                    <div class="td"
                         *ngFor="let mwl_table of tableSchema.mwl"
                         [ngClass]="[config?.cssTdClass || '', mwl_table.type || '']"
                         [ngStyle]="{width: mwl_table.calculatedWidth}"
                         [ngSwitch]="mwl_table.type"
                         (mouseenter)="active_td = mwl_table.elementId"
                         tooltip="{{ mwl_table.type === 'value' ? _.get(mwl.attrs, mwl_table.pathToValue) : (mwl_table.type === 'pipe' ? (mwl.attrs | dynamicPipe:mwl_table.pipe):'')}}"
                    >
                        <ng-container *ngSwitchCase="'index'">{{mwl.offset + 1}}</ng-container>
                        <ng-container *ngSwitchCase="'actions'">
<!--                            <button class="pointer dicom_table_buttons" *ngIf="config.showCheckboxes" title="Select" (click)="mwl.selected = !mwl.selected">
                                <span *ngIf="!mwl.selected" class="glyphicon glyphicon-unchecked"></span>
                                <span *ngIf="mwl.selected" class="glyphicon glyphicon-check"></span>
                            </button>-->
                            <ng-container *ngFor="let action of mwl_table.actions">
                                <a *ngIf="(!action.showIf || action.showIf(mwl, config))" class="pointer dicom_table_buttons"  (click)="$event.preventDefault();action.click(mwl,'mwl')" title="{{action.title || ''}}">
                                    <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
                                    <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
                                </a>
                            </ng-container>
                        </ng-container>
                        <ng-container *ngSwitchCase="'actions-menu'">
                            <a mat-button [matMenuTriggerFor]="menu" class="pointer dicom_table_buttons" ><span class="glyphicon glyphicon-option-vertical"></span></a>
                            <mat-menu #menu="matMenu" class="mwl_action_buttons" (click)="$event.stopPropagation()">
                                <ng-container *ngFor="let action of mwl_table.menu.actions">
                                    <a *ngIf="(!action.showIf || action.showIf(mwl, config))" class="pointer dicom_table_buttons" (click)="$event.preventDefault();action.click(mwl,'mwl')" title="{{action.title || ''}}">
                                        <span *ngIf="action.icon.tag === 'span' " class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</span>
                                        <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</i>
                                    </a>
                                </ng-container>
                            </mat-menu>
                        </ng-container>
                        <ng-container *ngSwitchCase="'pipe'">{{mwl.attrs | dynamicPipe:mwl_table.pipe}}</ng-container>
                        <ng-container *ngSwitchCase="'value'">{{_.get(mwl.attrs, mwl_table.pathToValue) || '&nbsp;'}}</ng-container>
                    </div>
                    <attribute-list *ngIf="mwl.showAttributes" [attrs]="mwl.attrs"></attribute-list>
                </div>
            </div>
            <div class="tr" *ngIf="patient.studies && patient.studies.length > 0 && patient.studies[0].showPaginations">
                <div class="instance_block table_item">
                    <div class="td td_with_centered_child">
                        <div class="centered_child">
                            <button
                                    title="Preview page of studies"
                                    class="transparent_button"
                                    (click)="paginationClick(patient, 'study', 'prev')"
                            ><span class="glyphicon glyphicon glyphicon-chevron-left"></span></button>
                            <button
                                    title="Next page of studies"
                                    class="transparent_button"
                                    (click)="paginationClick(patient, 'study', 'next')"
                            ><span class="glyphicon glyphicon glyphicon-chevron-right"></span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--mwl 2:END;-->
        <!--uwl 2:-->
        <div *ngIf="patient.showUwls" class="study_main_block">
            <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let uwl of patient.uwls;let i = index">
                <div class="mwl_block table_item" (mouseenter)="hover_mode = 'uwl'" [ngClass]="{'selected':uwl.selected}">
                    <div class="td"
                         *ngFor="let uwl_table of tableSchema.uwl"
                         [ngClass]="[config?.cssTdClass || '', uwl_table.type || '']"
                         [ngStyle]="{width: uwl_table.calculatedWidth}"
                         [ngSwitch]="uwl_table.type"
                         (mouseenter)="active_td = uwl_table.elementId"
                         tooltip="{{ uwl_table.type === 'value' ? _.get(uwl.attrs, uwl_table.pathToValue) : (uwl_table.type === 'pipe' ? (uwl.attrs | dynamicPipe:uwl_table.pipe):'')}}"
                    >
                        <ng-container *ngSwitchCase="'index'">{{uwl.offset + 1}}</ng-container>
                        <ng-container *ngSwitchCase="'actions'">
                            <!--                            <button class="pointer dicom_table_buttons" *ngIf="config.showCheckboxes" title="Select" (click)="uwl.selected = !uwl.selected">
                                                            <span *ngIf="!uwl.selected" class="glyphicon glyphicon-unchecked"></span>
                                                            <span *ngIf="uwl.selected" class="glyphicon glyphicon-check"></span>
                                                        </button>-->
                            <ng-container *ngFor="let action of uwl_table.actions">
                                <a *ngIf="(!action.showIf || action.showIf(uwl, config))" class="pointer dicom_table_buttons"  (click)="$event.preventDefault();action.click(uwl,'uwl')" title="{{action.title || ''}}">
                                    <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
                                    <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
                                </a>
                            </ng-container>
                        </ng-container>
                        <ng-container *ngSwitchCase="'actions-menu'">
                            <a mat-button [matMenuTriggerFor]="menu" class="pointer dicom_table_buttons" ><span class="glyphicon glyphicon-option-vertical"></span></a>
                            <mat-menu #menu="matMenu" class="uwl_action_buttons" (click)="$event.stopPropagation()">
                                <ng-container *ngFor="let action of uwl_table.menu.actions">
                                    <a *ngIf="(!action.showIf || action.showIf(uwl, config))" class="pointer dicom_table_buttons" (click)="$event.preventDefault();action.click(uwl,'uwl')" title="{{action.title || ''}}">
                                        <span *ngIf="action.icon.tag === 'span' " class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</span>
                                        <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</i>
                                    </a>
                                </ng-container>
                            </mat-menu>
                        </ng-container>
                        <ng-container *ngSwitchCase="'pipe'">{{uwl.attrs | dynamicPipe:uwl_table.pipe}}</ng-container>
                        <ng-container *ngSwitchCase="'value'">{{_.get(uwl.attrs, uwl_table.pathToValue) || '&nbsp;'}}</ng-container>
                    </div>
                    <attribute-list *ngIf="uwl.showAttributes" [attrs]="uwl.attrs"></attribute-list>
                </div>
            </div>
            <div class="tr" *ngIf="patient.studies && patient.studies.length > 0 && patient.studies[0].showPaginations">
                <div class="instance_block table_item">
                    <div class="td td_with_centered_child">
                        <div class="centered_child">
                            <button
                                    title="Preview page of studies"
                                    class="transparent_button"
                                    (click)="paginationClick(patient, 'study', 'prev')"
                            ><span class="glyphicon glyphicon glyphicon-chevron-left"></span></button>
                            <button
                                    title="Next page of studies"
                                    class="transparent_button"
                                    (click)="paginationClick(patient, 'study', 'next')"
                            ><span class="glyphicon glyphicon glyphicon-chevron-right"></span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--uwl 2:END;-->
        <!--diff 2:-->
        <div *ngIf="patient.showDiffs" class="study_main_block">
            <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let diff of patient.diffs;let i = index">
                <div class="diff_block table_item" (mouseenter)="hover_mode = 'diff'" [ngClass]="{'selected':diff.selected}">
                    <div class="td"
                         *ngFor="let diff_table of tableSchema.diff"
                         [ngClass]="[config?.cssTdClass || '', diff_table.type || '']"
                         [ngStyle]="{width: diff_table.calculatedWidth}"
                         [ngSwitch]="diff_table.type"
                         (mouseenter)="active_td = diff_table.elementId"
                         tooltip="{{ diff_table.type === 'value' ? _.get(diff.diffHeaders, diff_table.pathToValue) : (diff_table.type === 'pipe' ? (diff.diffHeaders | dynamicPipe:diff_table.pipe):'')}}"
                    >
                        <ng-container *ngSwitchCase="'index'">{{diff.offset + 1}}</ng-container>
                        <ng-container *ngSwitchCase="'actions'">
                            <ng-container *ngFor="let action of diff_table.actions">
                                <a *ngIf="(!action.showIf || action.showIf(diff, config))" class="pointer dicom_table_buttons"  (click)="$event.preventDefault();action.click(diff,'diff')" title="{{action.title || ''}}">
                                    <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
                                    <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
                                </a>
                            </ng-container>
                        </ng-container>
                        <ng-container *ngSwitchCase="'actions-menu'">
                            <a mat-button [matMenuTriggerFor]="menu" class="pointer dicom_table_buttons" ><span class="glyphicon glyphicon-option-vertical"></span></a>
                            <mat-menu #menu="matMenu" class="diff_action_buttons" (click)="$event.stopPropagation()">
                                <ng-container *ngFor="let action of diff_table.menu.actions">
                                    <a *ngIf="(!action.showIf || action.showIf(diff, config))" class="pointer dicom_table_buttons" (click)="$event.preventDefault();action.click(diff,'diff')" title="{{action.title || ''}}">
                                        <span *ngIf="action.icon.tag === 'span' " class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</span>
                                        <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}} menu_icon">{{action.icon.text||''}}</i>
                                    </a>
                                </ng-container>
                            </mat-menu>
                        </ng-container>
                        <ng-container *ngSwitchCase="'pipe'">{{diff.diffHeaders | dynamicPipe:diff_table.pipe}}</ng-container>
                        <ng-container *ngSwitchCase="'value'">
                            <ng-container *ngIf="_.get(diff.diffHeaders, diff_table.showBorderPath)">
                                <span class="red_border">{{_.get(diff.diffHeaders, diff_table.pathToValue) || '&nbsp;'}}</span>
                            </ng-container>
                            <ng-container *ngIf="!_.get(diff.diffHeaders, diff_table.showBorderPath)">
                                {{_.get(diff.diffHeaders, diff_table.pathToValue) || '&nbsp;'}}
                            </ng-container>
                        </ng-container>
                    </div>
                    <attribute-list *ngIf="diff.showAttributes" [attrs]="diff.attrs"></attribute-list>
                </div>
            </div>
            <div class="tr" *ngIf="patient.diffs && patient.diffs.length > 0 && patient.diffs[0].showPaginations">
                <div class="instance_block table_item">
                    <div class="td td_with_centered_child">
                        <div class="centered_child">
                            <button
                                    title="Preview page of studies"
                                    class="transparent_button"
                                    (click)="paginationClick(patient, 'diff', 'prev')"
                            ><span class="glyphicon glyphicon glyphicon-chevron-left"></span></button>
                            <button
                                    title="Next page of studies"
                                    class="transparent_button"
                                    (click)="paginationClick(patient, 'diff', 'next')"
                            ><span class="glyphicon glyphicon glyphicon-chevron-right"></span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--diff 2:END;-->

    </div>
    <!--1:END;-->
</div>
